<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router_3.0.2.js"></script>
</head>

<body>
    <div id="app">
        <router-link to='/user/2'>User</router-link>
        <router-link to='/register'>Register</router-link>
        <router-link :to="{name:'user',params:{id:225,routerName:'msg225'}}">User225</router-link>
        <router-view></router-view>
    </div>
    <script>
        const User = {
            // template: `<div>This is User component, id: {{$route.params.id}}</div>`
            props: ['id', 'routerName'],
            template: `
            <div>
                <div>This is User component, id: {{id}} -- {{routerName}}</div>
                <hr/>
                <button @click='goRegister'>跳转到注册页面</button>
            </div>
            `,
            methods: {
                goRegister: function() {
                    // this.$router.push('/register');
                    this.$router.push({
                        path: 'user',
                        params: {
                            id: 123
                        }
                    });
                }
            }
        };
        const Register = {
            template: `
            <div>
                <div>This is Register component</div>
                <hr/>
                <router-link to='/register/account'>账号密码注册</router-link>
                <router-link to='/register/phone'>手机号注册</router-link>
                <router-view></router-view>    
            </div>
            `,
        };
        const Account = {
            template: `
            <div>
                <div>账号：<input><br>密码：<input></div>
                <br/>
                <button @click='goBack'>后退</button>
            </div>
            `,
            methods: {
                goBack: function() {
                    this.$router.go(-1);
                }
            }
        };
        const Phone = {
            template: `<h1>扫我二维码</h1>`
        };
        const router = new VueRouter({
            routes: [{
                path: '/',
                redirect: '/user/1'
            }, {
                path: '/user/:id',
                component: User,
                name: 'user',
                // props: true,
                props: route => {
                    return {
                        id: route.params.id,
                        routerName: "message115616"
                    }
                }
            }, {
                path: '/register',
                component: Register,
                redirect: '/register/account',
                children: [{
                    path: '/register/account',
                    component: Account,
                }, {
                    path: '/register/phone',
                    component: Phone,
                }],
            }, ]
        });
        const vue = new Vue({
            el: '#app',
            router
        });
    </script>
</body>

</html>